import BaseInput from "@/components/ProForm/BaseInput.vue";
import BaseCascader from '@/components/ProForm/BaseCascader.vue'
import BaseCheckBox from '@/components/ProForm/BaseCheckBox.vue'
import BaseColorPicker from '@/components/ProForm/BaseColorPicker.vue'
import BaseDatePicker from '@/components/ProForm/BaseDatePicker.vue'
import BaseDateTimePicker from '@/components/ProForm/BaseDateTimePicker.vue'
import BaseInputNumber from '@/components/ProForm/BaseInputNumber.vue'
import BaseRadio from '@/components/ProForm/BaseRadio.vue'
import BaseSelect from '@/components/ProForm/BaseSelect.vue'
import BaseSwitch from '@/components/ProForm/BaseSwitch.vue'
import BaseTimePicker from '@/components/ProForm/BaseTimePicker.vue'
import BaseTimeSelect from '@/components/ProForm/BaseTimeSelect.vue'
import BaseUpload from '@/components/ProForm/BaseUpload.vue'
import BaseDropdown from '@/components/ProForm/BaseDropdown.vue'



import {
    options,
    shortcuts,
    SelectOptions
} from './data.js'
export default {
    formProps: { // 表单属性
        labelPosition: 'top',
        labelWidth: 'auto',
    },
    formItems: [{
            name: BaseInput,
            props: { // 表单项属性
                label: '输入框',
                prop: 'name',
                borderBottom: true,
            },
            // label: '姓名',
            elProps: { // 表单组件属性
                placeholder: '请输入',
                type:'password',
                showPassword:true,
                style: {
                    width: '600px',
                }
            },
            value: 'inputvalue' // 值（可按需设置不同类型值）
        },
        {
            name: BaseCascader,
            options: options,
            props: {
                label: '级联选择',
                prop: 'cascader',
            },
            elProps: {
                placeholder: '请输入',
                props: {
                    expandTrigger: 'hover',
                },
                style: {
                    width: '600px',
                }
            },
            value: []
        },
        {
            name: BaseCheckBox,
            options: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
            props: {
                label: '多选框组',
                prop: 'checkBox',
            },
            elProps: {
                max: 2,
                border: true
            },
            value: ['Shanghai']
        }, {
            name: BaseColorPicker,
            props: {
                label: '取色器',
                prop: 'colorpicker'
            },
            elProps: {
                showAlpha: true,
                // size:'small'
            },
            value: '#000000'
        }, {
            name: BaseDatePicker,
            props: {
                label: '日期选择',
                prop: 'datepicker',
            },
            elProps: {
                type: 'month',
                placeholder: '请选择日期',
                startPlaceholder: "Start date",
                endPlaceholder: "End date",
                clearable: true,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                // shortcuts:shortcuts,
                // defaultValue:new Date(2022,10,10)
                // defaultTime: [new Date(2023, 10, 10),
                //     new Date(2024, 12, 12),
                // ]
            },
            value: ''
        },
        {
            name: BaseDateTimePicker,
            value: '',
            props: {
                label: '日期时间选择器',
                prop: "datetimepicker"
            },
            elProps: {
                type: 'datetime',
                placeholder: '请选择日期时间',
                startPlaceholder: "Start date",
                endPlaceholder: "End date",
                clearable: true,
                // shortcuts:shortcuts,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                // defaultValue:new Date(2022,10,10)
            },
        },
        {
            name: BaseInputNumber,
            value: 3,
            props: {
                label: '数字输入框',
                prop: 'inputnumber'
            },
            elProps: {
                min: 1,
                max: 10
            }
        }, {
            name: BaseRadio,
            options: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
            props: {
                label: '单选框组',
                prop: 'radio',
            },
            elProps: {
                disabled: false,
                size: 'large'
            },
            value: 'Beijing'
        }, {
            name: BaseSelect,
            value: '',
            options: SelectOptions,
            props: {
                label: '选择器',
                prop: 'select'
            },
            elProps: {
                placeholder: 'Select',
                size: 'large',
                clearable: true,
                multiple: true
            },
        }, {
            name: BaseSwitch,
            value: false,
            props: {
                label: '开关',
                prop: 'switch'
            },
            elProps: {
                activeText: 'Pay by month',
                inactiveText: 'Pay by year'
            }
        }, {
            name: BaseTimePicker,
            value: '',
            props: {
                label: '时间选择',
                prop: 'timepicker'
            },
            elProps: {
                placeholder: '时间选择器',
                format: 'HH-mm-ss',
                valueFormat: 'HH-mm-ss'
            }
        }, {
            name: BaseTimeSelect,
            value: '',
            props: {
                label: '时间选择',
                prop: 'timeselect'
            },
            elProps: {
                placeholder: '时间选择',
                // format:'hh-mm A'
            }
        },
        {
            name: BaseUpload,
            value: [{
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
            }, ],
            props: {
                label: '上传',
                prop: 'upload'
            },
            elProps: {
                showFileList: true,
                autoUpload: true,
                listType: 'picture-card'
            }
        },
        {
            name: BaseDropdown,
            options: [
                {id: 1,title: 'aaaaaaaaaaaaaaaaa'},
                {id: 2,title: 'bbbbbbbbbbbbbbbbbbbbb'},
                {id: 3,title: 'ccccccccccccc'}
            ],
            value:'aaaaaaaaaaa',
            props: {
                label: '下拉菜单',
                prop: 'dropdown'
            },
            elProps: {
                disabled: false,
                divided: false,
                splitButton: false,
                // type:"primary"
                trigger:'hover',
                size:'large',
                placement:'bottom',
                // showTimeout:0,
                // hideTimeout:0
            }
        }
    ],
    rules: {
        'name': {
            type: 'string',
            min: 3,
            required: true,
            message: '姓名不低于3个字',
            trigger: ['blur', 'change'],
        },
    }
}